<template>
  <div class="to-do">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="待办事项" name="todo"></el-tab-pane>
      <el-tab-pane label="已办事项" name="done"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" v-loading="tableLoading">
      <el-table-column align="center" label="序号" type="index" width="65px" />
      <el-table-column prop="name" align="center" label="单号" />
      <el-table-column prop="name" align="center" label="材料名称" />
      <el-table-column prop="email" align="center" label="规格型号" />
      <el-table-column prop="datetime" align="center" label="材料计量单位" />
      <el-table-column prop="name" align="center" label="材料数量" />
      <el-table-column prop="name" align="center" label="出库时间" />
      <el-table-column v-if="activeTab === 'todo'" align="center" label="操作" width="80px">
        <template #default>
          <el-text type="primary">验收</el-text>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 16px" class="flex flex-end">
      <el-pagination
        background
        v-model:current-page="pageVO.current"
        v-model:page-size="pageVO.size"
        layout="prev, pager, next, jumper, total"
        :total="dataTotal"
        :page-size="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script setup>
import { usePageQuery } from '@/hooks/usePageQuery';

const activeTab = ref('todo');

const { data, methods } = usePageQuery({
  url: 'https://mock.mengxuegu.com/mock/65e708228ecfd33cdfbd688d/grace/random-data',
});
const { tableData, tableLoading, pageVO, dataTotal } = data;
const { getTableData, handleSizeChange, handlePageChange } = methods;

const handleTabChange = () => {
  pageVO.current = 1;
  getTableData();
};

onMounted(() => getTableData());
</script>
<style lang="scss" scoped>
.to-do {
  margin: 16px 0;
  border-radius: 4px;
  padding: 16px;
  background-color: #ffffff;
}
</style>
